/**
 *      @description 业主保存，修改页面
 *      @param modify : 指定该页面是新增业主还是修改业主,通过html的url传入
 */

class ForSaveOwner extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            owner: {},
            commPstn: false,
        };
    }

    /**
     * 新增业主后清空输入框
     */
    clearUI() {
        this.state.owner.ownerName = '';
        this.state.owner.ownerMob = '';
        this.state.owner.ownerNo = '';
        this.state.owner.roomInfo = '';
        this.state.owner.roomInfoNum = '';
        this.state.owner.isPstn = false;
        this.setState({});
    }


    /**
     * 从服务端获取这个小区的pstn权限状态,更新UI
     * @param commCode 小区编号
     */
    updatePstnCheck(commCode) {
        let params = {
            commCode: commCode,
            type: "allowPstn"
        };
        postJson("/comm/getCommInfo.x",$.param(params), (data) => {
            this.setState({commPstn : data.data});
        });
    }


    /**
     * 当小区下拉更新时,更新pstn选项状态
     * @param commCode 小区编号
     */
    commSelectChange(code,name) {
        this.state.owner[name] = code;

        if(name === 'commCode')
            this.updatePstnCheck(code);
        else
            this.setState({});
    }

    /**
     * 输入框变化时,将内容实时同步给react内部状态
     */
    inputOnChange(value,name) {
        this.state.owner[name] = value;
        this.setState({owner : this.state.owner});
    }

    sexCheck(checked, sex){
        this.state.owner.ownerSex = sex;
        this.setState({});
    }

    pstnCheck(checked){
        this.state.owner.isPstn =  checked;
        this.setState({});
    }

    saveOwner(){
        let roomInfo = "["+this.refs.commSelect.commText+"] "+this.refs.commSelect.buildingText + " "+
            this.refs.commSelect.unitText +" "+this.refs.commSelect.floorCode+"楼 "+this.refs.commSelect.roomCode+"房";
        let roomInfoNum = this.refs.commSelect.commCode + this.refs.commSelect.buildingCode +
            this.refs.commSelect.unitCode + this.refs.commSelect.floorCode+this.refs.commSelect.roomCode;

        this.state.owner.roomInfo = roomInfo;
        this.state.owner.roomInfoNum = roomInfoNum;
        this.state.owner.commName = this.refs.commSelect.commText;
        this.state.owner.applyType = this.refs.applyType.value;
        postJson("/owner/save.x", this.state.owner,(data) => {
            layer.msg(data.data);
            this.clearUI();
            if(this.props.onComplete)
                this.props.onComplete();
        });
    }

    render() {

        let pstnShow = this.state.commPstn ? {display: "block"} : {display: "none"};
        return (
        <Frame header="录入业主信息" hidden={this.props.modify}>
            <Form>
                <Item>
                    <Label>业主名称</Label>

                    <Input lay-verify="required" value={this.state.owner.ownerName}
                               onChange={(value) => this.inputOnChange(value,'ownerName')}/>
                </Item>

                <Item>
                    <Label>业主类型</Label>
                    <Select name="applyType" ref="applyType">
                        <option value="0">业主</option>
                        <option value="2">家属</option>
                        <option value="5">租客</option>
                    </Select>
                </Item>

                <Item>
                    <Label>性别</Label>

                    <ItemBlock>
                        <Radio name="ownerSex" value="0" title="男" onClick={(checked)=>this.sexCheck(checked,"0")}
                               checked={this.state.owner.ownerSex != "1"} ref="man"/>
                        <Radio name="ownerSex" value="1" title="女" onClick={(checked)=>this.sexCheck(checked,"1")}
                               checked={this.state.owner.ownerSex == "1"} ref="woman"/>
                    </ItemBlock>
                </Item>

                <Item style={pstnShow}>
                    <Label>电话呼转</Label>
                    <Switch checked={this.state.owner.isPstn} onClick={(checked)=>this.pstnCheck(checked)}
                               lay-text="ON|OFF" ref="pstn"/>
                </Item>

                <Item>
                    <Label>房间信息</Label>
                    <LayuiCommSelect ref="commSelect" lay-verify="required"
                                     buildingCode = {this.state.owner.areaCode} buildingText = {this.state.owner.areaAliasName}
                                     unitCode = {this.state.owner.buildingCode} unitText = {this.state.owner.buildingAliasName}
                                     floorCode = {this.state.owner.unitCode} roomCode = {this.state.owner.roomId}
                                     commCode = {this.state.owner.commCode}

                                     onChangeComm={(comm)=>this.commSelectChange(comm,'commCode')}
                                     onChangeBuilding={(buildingCode)=>this.commSelectChange(buildingCode,'areaCode')}
                                     onChangeUnit={(unitCode)=>this.commSelectChange(unitCode,'buildingCode')}
                                     onChangeFloor={(floorCode)=>this.commSelectChange(floorCode,'unitCode')}
                                     onChangeRoom={(roomCode)=>this.commSelectChange(roomCode,'roomId')}
                    />
                </Item>

                <Item>
                    <Label>身份证号</Label>
                    <Input placeholder="非必填选项" ref="ownerNo" value={this.state.owner.ownerNo}
                           onChange={(value) => this.inputOnChange(value,'ownerNo')}/>
                </Item>

                <Item>
                    <Label>手机号</Label>
                    <Input name="ownerMob" lay-verify="number" ref="ownerMob" value={this.state.owner.ownerMob}
                               onChange={(value) => this.inputOnChange(value,'ownerMob')}/>
                </Item>
                <Item>
                    <Button btnType="normal" formBtn="true" lay-submit="true" onClick={()=>this.saveOwner()}>确定</Button>
                </Item>
            </Form>
        </Frame>
        )
    }
}

ReactDOM.render(<ForSaveOwner/>, document.getElementById("forSaveOwner"));